<script>
init({
  title: 'Modal Table',
  desc: 'Use Bootstrap Table in a modal. We need to call `resetView` method after modal shown.',
  links: ['bootstrap-table.min.css'],
  scripts: ['bootstrap-table.min.js']
})
</script>

<template>
  <button
    id="button"
    type="button"
    class="btn btn-primary btn-lg"
    data-bs-toggle="modal"
    data-bs-target="#modalTable"
  >
    Launch modal table
  </button>
  <div
    id="modalTable"
    class="modal fade"
    tabindex="-1"
    role="dialog"
  >
    <div
      class="modal-dialog"
      role="document"
    >
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">
            Modal table
          </h5>
          <button
            type="button"
            class="btn-close"
            data-bs-dismiss="modal"
            aria-label="Close"
          ></button>
        </div>
        <div class="modal-body">
          <table
            id="table"
            data-toggle="table"
            data-height="345"
            data-url="json/data1.json"
          >
            <thead>
              <tr>
                <th data-field="id">
                  ID
                </th>
                <th data-field="name">
                  Item Name
                </th>
                <th data-field="price">
                  Item Price
                </th>
              </tr>
            </thead>
          </table>
        </div>
        <div class="modal-footer">
          <button
            type="button"
            class="btn btn-secondary"
            data-bs-dismiss="modal"
          >
            Close
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  const $table = $('#table')

  function mounted () {
    $('#modalTable').on('shown.bs.modal', function () {
      $table.bootstrapTable('resetView')
    })
  }
</script>
